DAY 1. HTML5 表格 Table

2018 iT 邦幫忙鐵人賽

DAY 1

Modern Web

重新學習網頁設計系列第 1 篇

2018鐵人賽 html5 table

Cian

2017-12-04 14:24:39

23690 瀏覽

分享至

在很久以前, 曾經人們大量的使用table來排版, 但table 帶來的巨大的限制, 我們沒辦法隨心所欲地使用它來完成多變繁瑣的佈局, 必須層層嵌套table來達到目的。

後來div佈局模式為大家帶來一道曙光, 我們能夠用更合理的方式來達到目的而使用大量不必要的table標籤來hack佈局。

且在之後可能常會不經意地聽到人們提到那以前table佈局模式是多麽的罪惡多麽的多麽的不再該被使用。

但真的是這樣嗎？

如果真的是這樣那為何在現今網站上還是常見到table到使用呢？

table的確還是有它的存在價值的, 或許它真的不適合與來做頁面佈局, 但在呈現大量報表式資料時table還是相當好用的。

HTML5問世後其實為table增添了許多能力。
搭配CSS3的@media更是為table打開了一道新窗。

本文將介紹如何使用table搭配HTML5特性
其內容包含 table、 tr、th、td、caption、thead、tbody、tfoot、colgroup、col 元素。
接著將會在下一單元介紹如何使用table搭配CSS3特性

table

表格元素

預設 CSS 屬性

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

大家一定見過帶有attribute的table例如：width、border、align ...

但幾乎全部的tableattribute都已經被標示為Not supported in HTML5.

樣式的設定較合理的做法是定義CSS屬性，而不是直接定義在元素attrubute當中。

table元素在javascript中屬HTMLTableElement實例
且帶有rows、tBodies兩個元素集合屬性

rows 返回 table 中所有的 tr 元素的HTMLCollection
tBodies 返回 table 中所有的 tbody 元素的HTMLCollection

tr

表示table中的 row 元素

預設 CSS 屬性

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

tr元素的屬性align、bgcolor、char、charoff、valign都已被標示為Not supported in HTML5.

tr元素在javascript中屬於HTMLTableRowElement實例
且帶有cells元素集合屬性

cells 返回 tr 中所有的 td 元素的HTMLCollection

td

作為table的一般 cell 元素

預設 CSS 屬性

td {
    display: table-cell;
    vertical-align: inherit;
}

td元素的大多的屬性都已被標示為Not supported in HTML5.
現有的合理屬性限於colspan、headers

colspan 用於合併儲存格
headers 該屬性應填寫表中th的id屬性質, 主要用途是為了告知視障朋友們當前td屬於什麼資料內容, 且該值可以同時存在多個id值，使用空白做為分隔。

td元素在javascript中屬於HTMLTableCellElement實例
實例屬性cellIndex性返回當前td的index於父tr, 引所由0開始。

th

作為table的標題 cell 元素

預設 CSS 屬性

th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: center;
}

th元素的大多的屬性都已被標示為Not supported in HTML5.
現有的合理屬性限於abbr、colspan、rowspan、headers、scope、sorted

abbr 設定或取得該欄位的值, 通常用於縮寫
colspan 用於合併橫向儲存格
rowspan 用於合併縱向儲存格
headers 該屬性應填寫表中th的id屬性質, 主要用途是為了告知視障朋友們當前th屬於什麼資料內容, 且該值可以同時存在多個id值，使用空白做為分隔。
scope 主要用於告訴視障朋友該欄位屬於col、colgroup、 row、rowgroup當中哪一個元素。
sorted 定義排列方向其合理屬性值包含number、reversed

th元素在javascript中屬於HTMLTableCellElement實例
實例屬性cellIndex性返回當前th的index於父tr, 引所由0開始。

caption

caption應該被設定於table的第一個子元素, 用於表示該table的title

預設 CSS 屬性

caption { 
    display: table-caption;
    text-align: center;
}

caption元素的所有屬性都已被標示為Not supported in HTML5.

caption元素在javascript中屬於HTMLTableCaptionElement實例

colgroup & col

colgroup與col都是很特別的新元素, 我們可以用它來設定table的columns樣式
以下是一個簡單的使用範例：

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

預設 CSS 屬性

colgroup { 
    display: table-column-group;
}
col { 
    display: table-column;
}

colgroup與col元素多數屬性都已被標示為Not supported in HTML5., 僅開放span屬性

span 定義要改變的column數目

colgroup與col元素在javascript中屬於HTMLTableColElement實例

colgroup與col元素使用上注意事項

col沒有閉合標籤
col必須被裝在colgroup元素中
當使用col元素時父元素必須是colgroup且不能帶有span屬性, 此時的span屬性應設定於col元素
當使用colgroup而不使用col時, 可以設定多個colgroup並設定其span屬性值

thead

用於將table中的表頭內容群組化

預設 CSS 屬性

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

thead元素的所有屬性都已被標示為Not supported in HTML5.

thead元素中必須至少包含一個tr元素

thead元素在javascript中屬於HTMLTableSectionElement實例

tfoot

用於總結table中的內容, 此元素不管定義於table元素的第幾子元素, 最終都將被html渲染製該table中最後子元素。

預設 CSS 屬性

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit;
}

tfoot元素的所有屬性都已被標示為Not supported in HTML5.

tfoot元素中必須至少包含一個tr元素

tfoot元素在javascript中屬於HTMLTableSectionElement實例

tbody

用於table中的主要內容群組化

預設 CSS 屬性

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

tbody元素的所有屬性都已被標示為Not supported in HTML5.

tbody元素中必須至少包含一個tr元素
table元素可以包含多個tbody元素
tbody元素必須用於table中, 且定義於thead、colgroup、caption元素之後

tbody元素在javascript中屬於HTMLTableSectionElement實例

總結

本文介紹至此介紹了table元素中的各個子元素的基本特性, 以及使用上的注意事項, 接著將會在下個單元介紹table搭配css3使用。

最後附上一個現代版本的table範例以及其DEMO

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>HTML5 table</title>
</head>
<body>
<table id="fruit_table">
  <caption>水果價目表</caption>
  
  <colgroup>
    <col style="background:lightgray">
    <col span="2" style="background:yellow">
  </colgroup>
  
  <thead>
    <tr>
      <th id="fruit_name">名稱</th>
      <th id="fruit_price">價格</th>
      <th id="fruit_inventory">剩餘數目</th>
    </tr>
  </thead>
  
  <tfoot style="color:blue;">
    <tr>
      <td colspan="3">芭樂已售完</td>
    </tr>
  </tfoot>
  
  <tbody>
    <tr>
      <td headers="fruit_name">蘋果</td>
      <td headers="fruit_price">30</td>
      <td headers="fruit_inventory">10</td>
    </tr>
    <tr>
      <td headers="fruit_name">香蕉</td>
      <td headers="fruit_price">25</td>
      <td headers="fruit_inventory">7</td>
    </tr>
    <tr>
      <td headers="fruit_name">芭樂</td>
      <td headers="fruit_price">20</td>
      <td headers="fruit_inventory"></td>
    </tr>
  </tbody>
</table>
</body>
</html>